```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能图片批量处理工具 | 专业在线图片尺寸调整</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #334155;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
        }
        .upload-area {
            border: 2px dashed #c7d2fe;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #818cf8;
            background-color: #f5f7ff;
        }
        .btn-primary {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            transform: translateY(-2px);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(167, 139, 250, 0.3);
            z-index: -1;
            transform: scaleX(1.05);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-28">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">智能批量<span class="highlight">图片尺寸调节</span></h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">一站式解决您的图片尺寸调整需求，快速、高效、保持原画质</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="btn-primary text-white font-medium py-3 px-8 rounded-full shadow-lg flex items-center justify-center">
                            <i class="fas fa-upload mr-2"></i> 立即上传图片
                        </button>
                        <button class="bg-white text-indigo-600 font-medium py-3 px-8 rounded-full shadow-lg flex items-center justify-center">
                            <i class="fas fa-cloud mr-2"></i> 从云端导入
                        </button>
                    </div>
                    <div class="mt-6 flex items-center text-sm opacity-80">
                        <i class="fas fa-lock mr-2"></i>
                        <span>所有处理在浏览器中完成，保护您的隐私安全</span>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
                        <div class="bg-gray-100 p-3 flex items-center">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="ml-4 text-gray-600 text-sm">图片处理预览</div>
                        </div>
                        <div class="p-6">
                            <div class="flex justify-between mb-4">
                                <div class="text-gray-700">原图尺寸: 1920×1080</div>
                                <i class="fas fa-arrow-right text-indigo-500"></i>
                                <div class="text-gray-700 font-medium">处理尺寸: 800×450</div>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="border rounded-lg overflow-hidden">
                                    <div class="bg-gradient-to-br from-blue-100 to-purple-100 h-40 flex items-center justify-center">
                                        <i class="fas fa-image text-4xl text-indigo-400"></i>
                                    </div>
                                    <div class="p-2 text-center text-sm text-gray-600">原图预览</div>
                                </div>
                                <div class="border rounded-lg overflow-hidden">
                                    <div class="bg-gradient-to-br from-green-100 to-teal-100 h-40 flex items-center justify-center">
                                        <i class="fas fa-image text-4xl text-green-500"></i>
                                    </div>
                                    <div class="p-2 text-center text-sm text-gray-600">处理后预览</div>
                                </div>
                            </div>
                            <div class="mt-4 bg-blue-50 rounded-lg p-3 text-sm text-blue-800">
                                <i class="fas fa-info-circle mr-2"></i> 图片质量保持100%，尺寸减小58%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">为什么选择我们的<span class="text-indigo-600">图片处理工具</span></h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-bolt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">批量高效处理</h3>
                    <p class="text-gray-600">一次性上传多张图片，系统自动批量处理，大幅提升工作效率，告别重复操作。</p>
                </div>
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-sliders-h text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">灵活尺寸调整</h3>
                    <p class="text-gray-600">支持像素精确调整和百分比缩放两种模式，自由控制输出尺寸，满足各类场景需求。</p>
                </div>
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-cloud text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">云端无缝对接</h3>
                    <p class="text-gray-600">直接连接Google Drive和Dropbox等云存储服务，无需下载即可处理云端文件。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">简单三步<span class="text-indigo-600">完成图片处理</span></h2>
            
            <div class="relative">
                <!-- Timeline -->
                <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-indigo-300 to-purple-300"></div>
                
                <!-- Step 1 -->
                <div class="relative mb-16 md:mb-0">
                    <div class="md:flex items-center">
                        <div class="md:w-1/2 md:pr-10 mb-8 md:mb-0">
                            <div class="bg-white rounded-xl shadow-md p-8 h-full">
                                <div class="flex items-center mb-4">
                                    <div class="bg-indigo-100 text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">1</div>
                                    <h3 class="text-xl font-bold">上传您的图片</h3>
                                </div>
                                <p class="text-gray-600 mb-4">从电脑直接拖放文件上传，或点击选择图片文件。支持JPG、PNG、SVG和GIF格式。</p>
                                <div class="upload-area border-2 rounded-lg p-8 text-center cursor-pointer">
                                    <i class="fas fa-cloud-upload-alt text-4xl text-indigo-400 mb-4"></i>
                                    <p class="font-medium text-gray-700">拖放图片文件到此处</p>
                                    <p class="text-sm text-gray-500 mt-2">或点击浏览文件</p>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 md:pl-10">
                            <div class="bg-indigo-50 rounded-xl p-6">
                                <h4 class="font-bold text-indigo-700 mb-2">支持多种来源</h4>
                                <div class="flex flex-wrap gap-4 mt-4">
                                    <div class="flex items-center bg-white rounded-lg px-4 py-2 shadow-sm">
                                        <i class="fab fa-google-drive text-red-500 mr-2"></i>
                                        <span>Google Drive</span>
                                    </div>
                                    <div class="flex items-center bg-white rounded-lg px-4 py-2 shadow-sm">
                                        <i class="fab fa-dropbox text-blue-500 mr-2"></i>
                                        <span>Dropbox</span>
                                    </div>
                                    <div class="flex items-center bg-white rounded-lg px-4 py-2 shadow-sm">
                                        <i class="fas fa-desktop text-purple-500 mr-2"></i>
                                        <span>本地文件</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="relative mb-16 md:mb-0">
                    <div class="md:flex items-center flex-row-reverse">
                        <div class="md:w-1/2 md:pl-10 mb-8 md:mb-0">
                            <div class="bg-white rounded-xl shadow-md p-8 h-full">
                                <div class="flex items-center mb-4">
                                    <div class="bg-indigo-100 text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">2</div>
                                    <h3 class="text-xl font-bold">设置处理参数</h3>
                                </div>
                                <p class="text-gray-600 mb-6">自定义图片尺寸调整方式，满足您的特定需求。</p>
                                
                                <div class="space-y-6">
                                    <div>
                                        <div class="flex items-center justify-between mb-2">
                                            <label class="font-medium text-gray-700">调整方式</label>
                                        </div>
                                        <div class="grid grid-cols-2 gap-4">
                                            <button class="border border-indigo-300 bg-indigo-50 text-indigo-600 py-2 px-4 rounded-lg font-medium">按像素调整</button>
                                            <button class="border border-gray-200 bg-white py-2 px-4 rounded-lg">按百分比调整</button>
                                        </div>
                                    </div>
                                    
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">宽度 (px)</label>
                                            <input type="number" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" placeholder="800">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">高度 (px)</label>
                                            <input type="number" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" placeholder="600">
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center">
                                        <input type="checkbox" id="keepRatio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                        <label for="keepRatio" class="ml-2 block text-sm text-gray-700">保持宽高比例</label>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">预设选项</label>
                                        <div class="flex flex-wrap gap-2">
                                            <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-full text-sm">缩小25%</button>
                                            <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 py-1 px-3 rounded-full text-sm">缩小50%</button>
                                            <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-full text-sm">缩小75%</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 md:pr-10">
                            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                                <h4 class="font-bold text-gray-700 mb-3">实时预览</h4>
                                <div class="flex justify-between items-center mb-4">
                                    <div class="text-sm text-gray-500">原图: 1920×1080</div>
                                    <i class="fas fa-arrow-right text-indigo-400"></i>
                                    <div class="text-sm font-medium">新尺寸: 800×450</div>
                                </div>
                                <div class="relative">
                                    <div class="bg-gray-200 rounded-lg overflow-hidden h-40 flex items-center justify-center">
                                        <i class="fas fa-image text-3xl text-gray-400"></i>
                                    </div>
                                    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                                        <div class="bg-black bg-opacity-50 text-white p-2 rounded-lg text-sm">点击查看原图</div>
                                    </div>
                                </div>
                                <div class="mt-3 text-xs text-gray-500 text-center">鼠标悬停预览处理效果</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="relative">
                    <div class="md:flex items-center">
                        <div class="md:w-1/2 md:pr-10">
                            <div class="bg-white rounded-xl shadow-md p-8 h-full">
                                <div class="flex items-center mb-4">
                                    <div class="bg-indigo-100 text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4">3</div>
                                    <h3 class="text-xl font-bold">下载处理结果</h3>
                                </div>
                                <p class="text-gray-600 mb-6">处理完成后，您可以下载单张图片或打包下载所有处理后的图片。</p>
                                
                                <div class="space-y-4">
                                    <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <i class="fas fa-image text-indigo-500 mr-3"></i>
                                                <div>
                                                    <div class="font-medium">图片1.jpg</div>
                                                    <div class="text-sm text-gray-500">800×450 (从1920×1080调整)</div>
                                                </div>
                                            </div>
                                            <button class="text-indigo-600 hover:text-indigo-800">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <i class="fas fa-image text-indigo-500 mr-3"></i>
                                                <div>
                                                    <div class="font-medium">图片2.png</div>
                                                    <div class="text-sm text-gray-500">800×450 (从1920×1080调整)</div>
                                                </div>
                                            </div>
                                            <button class="text-indigo-600 hover:text-indigo-800">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-6">
                                        <button class="btn-primary text-white font-medium py-3 px-6 rounded-lg w-full flex items-center justify-center">
                                            <i class="fas fa-file-archive mr-2"></i> 打包下载全部图片 (ZIP)
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 md:pl-10 mt-8 md:mt-0">
                            <div class="bg-indigo-50 rounded-xl p-8">
                                <h4 class="text-lg font-bold text-indigo-700 mb-4">批量处理优势</h4>
                                <div class="space-y-4">
                                    <div class="flex items-start">
                                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                            <i class="fas fa-clock"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-gray-800">节省时间</h5>
                                            <p class="text-sm text-gray-600">相比单张处理，批量处理可节省90%以上的时间</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                            <i class="fas fa-th-large"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-gray-800">统一标准</h5>
                                            <p class="text-sm text-gray-600">确保所有图片采用相同的尺寸标准，保持一致性</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                            <i class="fas fa-lock"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-gray-800">隐私保护</h5>
                                            <p class="text-sm text-gray-600">所有处理在浏览器本地完成，图片不会上传到服务器</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data Visualization Section -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">图片处理<span class="text-indigo-600">工作流程</span></h2>
            
            <div class="bg-gray-50 rounded-xl p-8">
                <div class="mermaid">
                    graph TD
                        A[上传图片] -->|支持多文件| B(选择来源)
                        B --> C[本地文件]
                        B --> D[Google Drive]
                        B --> E[Dropbox]
                        C --> F[设置处理参数]
                        D --> F
                        E --> F
                        F --> G[按像素调整]
                        F --> H[按百分比调整]
                        G --> I[输入宽度/高度]
                        H --> J[选择缩放比例]
                        I --> K[保持宽高比?]
                        J --> K
                        K --> L[预览效果]
                        L --> M[满意?]
                        M -->|是| N[下载图片]
                        M -->|否| F
                        N --> O[单张下载]
                        N --> P[打包下载]
                </div>
            </div>
            
            <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-indigo-50 rounded-xl p-8">
                    <h3 class="text-xl font-bold text-indigo-700 mb-4">支持的图片格式</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white rounded-lg p-4 flex items-center">
                            <i class="fas fa-file-image text-red-500 text-2xl mr-3"></i>
                            <div>
                                <div class="font-medium">JPG/JPEG</div>
                                <div class="text-sm text-gray-500">照片格式</div>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg p-4 flex items-center">
                            <i class="fas fa-file-image text-blue-500 text-2xl mr-3"></i>
                            <div>
                                <div class="font-medium">PNG</div>
                                <div class="text-sm text-gray-500">透明背景</div>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg p-4 flex items-center">
                            <i class="fas fa-file-image text-yellow-500 text-2xl mr-3"></i>
                            <div>
                                <div class="font-medium">GIF</div>
                                <div class="text-sm text-gray-500">动图支持</div>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg p-4 flex items-center">
                            <i class="fas fa-file-image text-purple-500 text-2xl mr-3"></i>
                            <div>
                                <div class="font-medium">SVG</div>
                                <div class="text-sm text-gray-500">矢量图形</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md p-8 border border-gray-100">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">常见应用场景</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-blog"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">网站内容优化</h4>
                                <p class="text-sm text-gray-600">调整图片尺寸以适应网页布局，提高加载速度</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">移动端适配</h4>
                                <p class="text-sm text-gray-600">为移动设备创建适合屏幕尺寸的图片版本</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">邮件附件</h4>
                                <p class="text-sm text-gray-600">减小图片尺寸以便通过电子邮件发送</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-4">
                                <i class="fas fa-file-upload"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">社交媒体</h4>
                                <p class="text-sm text-gray-600">调整图片尺寸满足不同平台的上传要求</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-indigo-600 text-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">立即体验<span class="text-indigo-200">批量图片处理</span>的高效便捷</h2>
            <p class="text-xl mb-10 opacity-90">无需注册，完全免费，所有处理在您的浏览器中安全完成</p>
            <button class="btn-primary text-white font-medium py-4 px-12 rounded-full shadow-lg text-lg inline-flex items-center">
                <i class="fas fa-magic mr-3"></i> 开始处理图片
            </button>
            <div class="mt-6 text-indigo-100 text-sm">
                <i class="fas fa-shield-alt mr-2"></i> 您的图片永远不会上传到我们的服务器
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 简单的交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = '';
            });
        });
    </script>
</body>
</html>
```